---
path: /form/upload
name: upload
title: Upload 上传
---


<div class="sys-ctx-main-left">

# Upload 上传\{#title\}

## 代码演示 \{#sp-demos\}

::demos{columns=2}

:::demo[基础用法]{id='base' src='/form/upload/1base.demo.tsx'}

基础用法

:::


:::demo[默认列表]{id='defaultList' src='/form/upload/2defaultList.demo.tsx'}

`defaultFileList` 可以初始化默认的列表

:::


:::demo[拖拽]{id='drag' src='/form/upload/3drag.demo.tsx'}

`type="drag"` 可以支持拖拽上传，
上传的数据使用data传入， 自定义请求头通过 `headers` 参数传输

:::


:::demo[照片墙]{id='pictures' src='/form/upload/4pictures.demo.tsx'}

`listType="picture"` 文件列表以照片墙的形式展示

:::


:::demo[获取列表]{id='getList' src='/form/upload/5getList.demo.tsx'}

通过ref获取upload的引用， 可调用 `getFileList` 获取文件列表

:::



## 属性 \{#props\}

| 属性 | 说明 | 类型 | 默认值 |
| :--- | :---- | :--- | :--- |
|classList|自定义class|Object|-|
|class|自定义class|string|-|
|style|自定义样式|Object||
|action|上传的地址|string||
|name|name属性|string||
|multiple|是否支持多选文件|boolean||
|webkitdirectory|是否开启选择文件夹，部分浏览器适用|boolean||
|accept|接受上传的文件类型|string||
|beforeUpload|上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传|Function||
|format|支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名|string[]||
|maxSize|文件大小限制，单位b|Number||
|headers|设置上传的请求头部|Object||
|withCredentials|支持发送 cookie 凭证信息|boolean||
|data|上传时附带的额外参数|Object||
|defaultFileList|默认已上传的文件列表|Array||
|type|上传控件的类型|select &#124; drag|select|
|paste|是否支持粘贴上传文件|boolean||
|ref|组件引用|any||
|getFileUrl|自定义预览的url地址|Function||
|listType|列表的类型 picture|boolean||
|onProgress|文件上传时的钩子，返回字段为 event, file, fileList|Function||
|onSuccess|文件上传成功时的钩子，返回字段为 response, file, fileList|Function||
|onError|文件上传失败时的钩子，返回字段为 error, file, fileList|Function||
|onRemove|文件列表移除文件时的钩子，返回字段为 file, fileList|Function||
|onPreview|点击已上传的文件链接时的钩子，返回字段为 可以通过 file.response 拿到服务端返回数据|Function||
|onFormatError|文件格式验证失败时的钩子，返回字段为 file, fileList|Function||
|onExceededSize|文件超出指定大小限制时的钩子，返回字段为 file, fileList|Function||


## 事件 \{#events\}

| 事件名称 | 说明 | 返回值|
| :--- | :---- | :--- |
|`onProgress`|文件上传时的钩子|event, file, fileList|
|`onSuccess`|文件上传成功时的钩子|response, file, fileList|
|`onError`|文件上传失败时的钩子|error, file, fileList|
|`onRemove`|文件列表移除文件时的钩子|file, fileList|
|`onPreview`|点击已上传的文件链接时的钩子|file|
|`onFormatError`|文件格式验证失败时的钩子|file, fileList|
|`onExceededSize`|文件超出指定大小限制时的钩子|file, fileList|

</div>

